import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:get/get.dart';
import 'package:online_study/base/app_title.dart';
import 'package:online_study/course/course_detail.dart';
import 'package:online_study/theme/colors.dart';
import 'package:online_study/theme/size.dart';

//我的收藏
class MyCollectionPage extends StatefulWidget {
  @override
  _MyCollectionPageState createState() => _MyCollectionPageState();
}

class _MyCollectionPageState extends State<MyCollectionPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ThemeColor.colorWhite,
      appBar: AppBar(
        leading: BackButton(color: ThemeColor.color333333),
        titleSpacing: 0,
        elevation: ThemeSize.appElevation,
        backgroundColor: ThemeColor.colorWhite,
        title: AppTitle("收藏课程"),
      ),
      body: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              child: Slidable(
                child: _buildListItem(),
                actionPane: SlidableDrawerActionPane(),
                secondaryActions: <Widget>[
                  IconSlideAction(
                    caption: '删除',
                    color: Colors.red,
                    icon: Icons.delete,
                    onTap: () =>
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                      content: Text('删除成功!'),
                    )),
                  ),
                ],
              ),
              onTap: () {
                Get.to(() => CourseDetailPage());
              },
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Divider(height: ThemeSize.width1);
          },
          itemCount: 8),
    );
  }

  Widget _buildListItem() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: ThemeSize.width19),
      width: double.infinity,
      height: ThemeSize.height100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              margin: EdgeInsets.symmetric(vertical: ThemeSize.height10),
              width: ThemeSize.width110,
              height: ThemeSize.height80,
              decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.all(Radius.circular(ThemeSize.width9)),
                  image: DecorationImage(
                      image: NetworkImage(
                          "https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg"),
                      fit: BoxFit.cover))),
          Expanded(
              child: Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: ThemeSize.width12),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("PS入门基础课",
                    style: TextStyle(
                        color: ThemeColor.color333333,
                        fontSize: ThemeSize.sp13,
                        fontWeight: FontWeight.bold)),
                Container(
                  padding: EdgeInsets.only(top: ThemeSize.height6),
                  child: Text("P图不找人-入门课程",
                      style: TextStyle(
                          color: ThemeColor.color333333,
                          fontSize: ThemeSize.sp13)),
                ),
                Container(
                    alignment: Alignment.topRight,
                    padding: EdgeInsets.only(top: ThemeSize.height10),
                    child: Text("已学习：45%",
                        style: TextStyle(
                            color: ThemeColor.color555555,
                            fontSize: ThemeSize.sp10))),
                Container(
                  margin: EdgeInsets.only(top: ThemeSize.height6),
                  height: ThemeSize.height8,
                  width: double.infinity,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(ThemeSize.height8),
                    child: LinearProgressIndicator(
                      value: 0.3,
                      backgroundColor: ThemeColor.colorCorner,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),
                  ),
                )
              ],
            ),
          ))
        ],
      ),
    );
  }
}
